<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>显示网络场景</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            'esri/Map',
            'esri/views/MapView',
            'esri/Graphic',
            'esri/layers/GraphicsLayer'
        ],function(
            Map,
            MapView,
            Graphic,
            GraphicsLayer
        ) {
            var map = new Map({
                basemap: "topo-vector"
            });
                
            var view = new MapView({
                container: "viewDiv",  
                map: map,
                center: [-118.80500,34.02700],
                zoom: 13
            });

            var graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            // Create a point
            var point = {
                type:"point",
                longitude:-118.80657463861,
                latitude:34.0005930608889,
            };

            var simpleMarkerSymbol = {
                type:"simple-market",
                color: [226, 119, 40],  // orange
                outline: {
                    color: [255, 255, 255], // white
                    width: 1
                }
            };
             var pointGraphic = new Graphic({
                 geometry:point,
                 symbol:simpleMarkerSymbol
             });

             graphicsLayer.add(pointGraphic);

             // Create a line geometry
            var simpleLineSymbol = {
                type: "simple-line",
                color: [226, 119, 40], // orange
                width: 2
            };

            var polyline = {
                type: "polyline",
                paths: [
                    [-118.821527826096, 34.0139576938577], 
                    [-118.814893761649, 34.0080602407843], 
                    [-118.808878330345, 34.0016642996246]
                ]
            };

            var polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });

            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            var polygon = {
                type: "polygon",
                rings: [
                    [-118.818984489994, 34.0137559967283], 
                    [-118.806796597377, 34.0215816298725], 
                    [-118.791432890735, 34.0163883241613], 
                    [-118.79596686535, 34.008564864635], 
                    [-118.808558110679, 34.0035027131376]
                ]
            };

            var simpleFillSymbol = {
                type: "simple-fill",
                color: [227, 139, 79, 0.8],  // orange, opacity 80%
                outline: {
                    color: [255, 255, 255],
                    width: 1
                }
            };

            var polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);
        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>